<template>
    <!--热门房源-->
    <article class="city-hot-housing-box" id="hot-housing">
        <div class="public-header-content">
            <div class="header">
                <i></i>热门房源
            </div>
            <div class="content clearfix">
                <a-row>
                    <a-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" v-for="(item, index) in recommendHouseItem" :key="index" class="li">
                        <a-card :title="null" hoverable :loading="recommendHouseListLoading">
                            <router-link :to="{path: 'EstateDetails', query: {EstateHouseId: item.id }}">
                                <img v-lazy="item.photo" :title="item.title" :alt="item.title">
                                <p class="webkit-text-overflow-1lines">{{ isNull0(item.title) }}</p>
                            </router-link>
                            <div class="bottom">
                                <header>
                                    <span class="investmentType">{{ isNull0(item.investmentType) }}</span>
                                    <em>|</em>
                                    <span>{{ isNull0(item.projectType) }}</span>
                                    <em>|</em>
                                    <span>{{ isSplit_houseType(item.houseType) }}</span>
                                </header>
                                <p class="webkit-text-overflow-1lines">{{ isNull0(item.tags) }}</p>
                                <aside class="webkit-text-overflow-1lines">
                                    <span class="price">$<i>{{ isNull0(item.price) }}</i>万 {{ isNull0_RMB(item.price, '万', 'USD') }}</span>
                                    <em>|</em>
                                    <span class="area">{{ isNull0(item.minArea) }}m²起</span>
                                </aside>
                            </div>
                        </a-card>
                    </a-col>
                </a-row>
            </div>
        </div>

        <p v-show="false">{{getCityDetails}}</p>
    </article>
</template>

<script>
    export default {
        data() {
            return {
                cityId: null, //城市Id
                recommendHouseItem: [], //城市热门房源数据
                recommendHouseListLoading: true,//列表加载loading
            }
        },
        computed: {
            //从state获取城市详情数据
            getCityDetails() {
                if(this.$store.getters.get_cityDetails){
                    if(Object.keys(this.$store.getters.get_cityDetails).length != 0){
                        // 获取推荐房源数据
                        this.getRecommendHouseData();
                    }
                }
                return this.$store.getters.get_cityDetails
            },
        },
        created() {},
        mounted() {
        },
        methods: {
            // 获取推荐房源数据
            getRecommendHouseData() {
                this.cityId = this.$store.getters.get_cityDetails.id;
                this.$get(`/house/search/1/8?cid=${this.cityId}&field=sort&direction=asc&isRecommend=true`).then(res => {
                    this.recommendHouseListLoading = false;
                    if (res.status == 0) {
                        this.recommendHouseItem = res.list;
                        this.noDataShow = false;
                    }else{
                        console.log(res.msg);
                        this.noDataShow = true;
                    }
                });
            },

         },
        components: {}
    }
</script>
<style lang="less" type="text/less">
    body{
        .city-hot-housing-box{
            .content{
                .ant-row {
                    >.li{
                        margin: 15px 0;
                        padding: 0 10px;
                        .ant-card {
                            > .ant-card-body {
                                padding: 0;
                                > a {
                                    display: block;
                                    position: relative;
                                    cursor: pointer;
                                    overflow: hidden;
                                    > img {
                                        width: 100%;
                                        height: 185px;
                                        -webkit-transition: all linear 1s;
                                        -moz-transition: all linear 1s;
                                        transition: all linear 1s;
                                    }
                                    > p {
                                        width: 100%;
                                        position: absolute;
                                        bottom: 0;
                                        background: rgba(0, 0, 0, .4);
                                        font-size: 15px;
                                        color: #fff;
                                        padding: 0 0 0 15px;
                                    }
                                }
                                >.bottom {
                                    padding: 15px 10px;
                                    > header {
                                        > span {
                                            font-size: 14px;
                                            font-weight: bold;
                                        }
                                        > em {
                                            margin: 0 5px;
                                        }
                                    }
                                    > p {
                                        font-size: 14px;
                                        color: #6b6b6b;
                                    }
                                    > aside {
                                        font-size: 14px;
                                        > span {
                                            font-weight: bold;
                                        }
                                        > em {
                                            margin: 0 5px;
                                        }
                                        > span.price {
                                            > i {
                                                font-size: 18px;
                                                color: red;
                                            }
                                        }
                                        > span.area {

                                        }
                                        > span.investmentType {

                                        }
                                    }
                                }
                            }
                        }
                    }
                    >.li:hover{
                        .ant-card {
                            > .ant-card-body {
                                > a {
                                    > img {
                                        -webkit-transform: scale(1.1, 1.1);
                                        -moz-transform: scale(1.1, 1.1);
                                        transform: scale(1.1, 1.1);
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>